import 'package:flutter/material.dart';

/* 
Image.asset， 本地图片
Image.network 远程图片

Image组件 常用属性：
alignment     对齐方式
fit           BoxFit.fill:全图显示、BoxFit.contain:全图显示、BoxFit.cover充满容器；
repeat        ImageRepeat.repeat : 横向和纵向铺满容器。ImageRepeat.repeatX: 横向重复。ImageRepeat.repeatY：纵向重复，横向不重复
color/colorBlendMode     设置图片的背景颜色


设置圆形的三种方式：
- 在背景设置圆角并添加图片
- 使用 ClipOval 包裹Image组件

- 使用本地资源的时候
- 根目录下添加文件
- 并在 pubspec.yaml 文件下的 assets 关键字下声明文件位置  就可以使用了
*/

/*
图片地址：
https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png
https://www.itying.com/themes/itying/images/ionic4.png
*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件
      MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: Text('学习Image组件, 实现圆形'),
        ),
        body: Column(
          children: [MyApp()],
        )),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        color: Colors.lightBlue,
        borderRadius: BorderRadius.circular(75),
        // 实现圆形图片 方式1 引入的是网络图片
        /* 
        image: DecorationImage(
          image: NetworkImage(
            'https://www.itying.com/themes/itying/images/ionic4.png'),
          fit: BoxFit.cover) 
        */
      ),
      // 这种配置方式不能显示圆形, 想要实现圆形 ，需要设置到背景或者用ClipOval包裹
      // child: Image.network(
      //   'https://www.itying.com/themes/itying/images/ionic4.png',
      //   fit: BoxFit.cover,
      // ),

      // 实现圆形图片 方式2 引入本地图片
      child: ClipOval(child: Image.asset('images/1.jpg', fit: BoxFit.cover)),
    );
  }
}
